
import * as echarts from '../../../../ec-canvas/echarts';
const systemInfo = wx.getSystemInfoSync();

Component({
  properties: {
    sign: {
      type: String
    },
    userName: {
      type: String,
      default: ''
    }
  },

  data: {
    ec: {
      lazyLoad: true
    },
  },
  pageLifetimes: {

  },
  methods: {
  
    countEcharts(data){
      let mychart = this.selectComponent("#mychart-dom-bar");
      mychart.init((canvas, width, height) => {
        const Chart = echarts.init(canvas, null, {
          width: width,
          height: height
        });
        Chart.setOption(this.getBarOption(data.result))
      })
    },

    // 配置bar
    getBarOption(result) {
      let data = []
      let labels = result.labels,
        newLables = [],
        sign = this.properties.sign
     
      result.oee.forEach((item, index )=> {
        let val = sign == 1 && labels[index].split(' ')[1] || labels[index];
        newLables.push(val)
        data.push([val, item])
      })
      let dataArr = ['OEE'],
        series =[
        {
          name: 'OEE',
          type: 'line',
          smooth: true,
          symbol: 'circle',
          symbolSize: 5,
          sampling: 'average',
          lineStyle: {
            color: '#3AD5AB'
          },
          itemStyle: {
            normal: {
              color: 'rgba(58, 213, 171, 1)'
            }
          },
          stack: 'a',
          areaStyle: {
            normal: {
              color: new echarts.graphic.LinearGradient(0, 0, 0, 0.9, [{
                offset: 0,
                color: 'rgba(58, 213, 171, 1)',
              }, {
                offset: 1,
                color: 'rgba(58, 213, 171, 0)',
              }])
            }
          },
          data: data
        },
      ]
      if (this.properties.userName === 'tobaccoxiamen'){

        dataArr = ['OEE变化', 'OEE数据'];
        series = [
          {
            name: "OEE变化",
            type: 'line',
            symbol: 'circle',
            symbolSize: 5,
            label: {
              normal: {
                position: 'insideRight'
              }
            },
            itemStyle: {
              color: '#ffd285'
            },
            data: data
          },
          {
            name: "OEE数据",
            type: 'bar',
            barWidth: data.length < 36 && '7.5' || '',
            label: {
              normal: {
                position: 'insideRight'
              }
            },
            itemStyle: {
              color: '#4a63c7'
            },
            data: data
          }
        ]

      }
      return {
        animation: false,
        legend: {
          data: dataArr,
          top: 0,
          itemStyle: {
            normal: {
              lineStyle: {
                color: "#fff"
              }
            }
          },
          textStyle: {
            color: "#BAD7FF",
            fontSize: 9,
          }
        },
        xAxis: {
          type: 'category',
          name: '时间',
          nameGap: 5.5,
          splitLine: {
            show: false
          },
          data: newLables,
          
          nameTextStyle: {
            color: "#BAD7FF",
            fontSize: 12,
            

          },
          axisLabel: {
            margin: 10,
            color: "#BAD7FF",
            fontSize: 9,
            // formatter(val){
            //   return val.split(' ')[1]
            // },
          },
          axisLine: {
            lineStyle: {
              color: '#39529A'
            }
          }
        },
        yAxis: {
          type: 'value',
          name: '百分比',
          nameGap: 8,
          min: 0,
          max: 100,
          boundaryGap: true,
          nameTextStyle: {
            color: "#BAD7FF",
            fontSize: 12,
          },
          axisTick: {
            inside: true,
            alignWithLabel: true,
          },
          splitLine: {
            show: false
          },
          axisLabel: {
            formatter: '{value}%',
            color: "#BAD7FF",
            fontSize: 9,
          },
          z: 10,
          axisLine: {
            lineStyle: {
              color: '#39529A'
            }
          }
        },
        grid: {
          top: 24,
          left: 50,
          right: 30,
          bottom: 26,
          height: systemInfo.windowWidth <= 360 && 85 || 110
        },
        dataZoom: [{
          type: 'inside',
          throttle: 50
        }],
        series: series
      };
    },
     
  }
})